<template>
    <div class="page">
      <terms_modal ref="terms_modal" />
  
      <div class="page-bg">
        <img src="@/static/engineering5188/login/login.png" alt="">
      </div>
  
      <div class="page-ctx">
        <div class="center page-inner flex-between">
  
          <div class="inner form-box">
  
  
            <div class="input-wrap">
              <div class="tab-box">
                <div class="tab-item">
                  重置密码
                </div>
              </div>
  
              <template>
                <div class="input-box">
                  <span>手机号</span>
                  <input type="text" placeholder="请输入手机号码" v-model="form.mobile" />
                </div>
  
                <!-- 验证码 -->
                <div class="sms-box">
                  <div class="input-box validate-box">
                    <span class="text">验证码</span>

                    <input type="text" v-model="form.sms_code" />
                    <span class="get-code" @click="onSendPhoneCode" v-if="timeOut==0">
                      获取验证码
                    </span>
                    <span v-if="timeOut>0">（{{ timeOut }}）s</span>
                  </div>
                </div>
  
                <div class="input-box" v-if="tabType == 'PASS'">
                  <span>设置密码</span>
                  <input type="password" placeholder="请输入新密码" v-model="form.password" />
                </div>
                <!-- <div class="input-box" v-if="tabType == 'PASS'">
                  <span>确认密码</span>
                  <input type="password" placeholder="请输入确认密码" v-model="form.confirm_pass" />
                </div> -->
  
                <div class="btn-box">
                  <button class="btn-ripple" @click="do_submit()">提 交</button>
                </div>
  
                <div class="terms-box">
                    <span class="terms-check" @click="is_agree = !is_agree">
                      <img v-if="is_agree" src="@/static/engineering5188/common/check1.png" alt="">
                      <img v-else src="@/static/common/check0.png" alt="">
                      我已阅读并同意
                    </span>
                    <span class="terms-text"  @click="$router.push('/serviceTerms')">《服务条款》和</span>
                    <span class="terms-text"  @click="$router.push('/privacy')">《隐私政策》</span>
                </div>
  
              </template>
            </div>
          </div>
        </div>
      </div>
  
  
  
    </div>
  </template>
  
  <script>
  import sms_phone from "@/components/login/sms_phone.vue"; //短信验证码
  import terms_modal from "@/components/account/terms_modal.vue"; //协议弹窗
  
  import { mapState } from "vuex";
  
  export default {
    name: "login",
    components: {
      sms_phone,
      // modalTerms,
      terms_modal,
    },
    data() {
      return {
        is_agree: true,
  
        mode: "账号密码", //微信扫码
        tabType: "PASS", //登录方式
        agreed: false,
  
        form: {
            mobile: "",
            sms_code: "",
            password: "",
        },
        timeOut:0,
        timer:null,
      };
    },
    computed: {
      ...mapState(["logo"]),
    },
    created() {
      this.setView();
    },
  
    methods: {
        onSendPhoneCode(){
            if(this.form.mobile.trim().length != 11){
            alertErr("请输入正确的手机号");
            return;
        }
        if(this.timeOut>0){
            return;
        }

        this.$httpApi("/api/send", {
            mobile: this.form.mobile,
            scene_type: 2
        }, "post").then(res =>{
            if(res.code == 200){
                alertSucc("发送成功");
                this.timeOut = 60;
                this.timer = setInterval(() => {
                    this.timeOut--;
                    if (this.timeOut <= 0) {
                        clearInterval(this.timer);
                    }
                }, 1000);
            }else{
                alertErr(res.msg);
            }
        }) 
        },
      terms_open(id) {
        this.$refs.terms_modal.init(id);
      },
      setView() { },
  
      //
      do_submit() {
        let reg_phone = /^1[3-9]\d{9}$/;
  
        if (!reg_phone.test(this.form.mobile)) {
          alertErr("请输入正确的手机号");
          return;
        }
        if (!this.form.sms_code) {
          alertErr("请输入验证码");
          return;
        }
        if (!this.form.password) {
          alertErr("请输入密码");
          return;
        }
        if (!this.is_agree) {
          alertErr("请勾选协议");
          return;
        }

        this.$httpApi("/api/forgetPassword", {
            ...this.form,
        }, "post").then(res =>{
            if(res.code == 200){
                let { code, data, msg } = res;
                alertSucc(msg);
                if (code == 200) {
                  this.$router.push("/supplierLogin");
                }
            }else{
                alertErr(res.msg);
            }
        }) 
      },
  
      //条款
      onClick_shengming() {
        this.$router.push("/banquan");
      },
      onClick_yinsi() {
        this.$router.push("/yinsi");
      },
    },
  };
  </script>
  
  <style scoped lang="less">
  .page {
    position: relative;
  
  
  
  
    .page-bg {
      img {
        width: 100%;
        min-height: 665px;
      }
    }
  
    .page-ctx {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
  
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  
    .center {
      height: 780px;
      //width: @width;
      //margin: 0 auto;
      background: transparent;
      align-items: center;
      position: relative;
      margin-right: 420px;
  
  
  
      .inner {
        position: relative;
        width: 480px;
        height: 480px;
        background: #FFFFFF;
        box-shadow: 0px 2px 14px 1px rgba(79,79,79,0.3);
        border-radius: 16px 16px 16px 16px;
  
        padding-top: 40px;
        padding-left:40px;
        padding-right:40px;
  
        .mode-toggle {
          position: absolute;
          right: 12px;
          top: 12px;
  
          img {
            width: 64px;
            cursor: pointer;
          }
        }
  
        .left {}
  
        .right {
          // width: 480px;
          // height: 480px;
          // background: #ffffff;
          // box-shadow: 0px 10px 20px rgba(1, 100, 98, 0.2);
          // opacity: 1;
          // border-radius: 10px;
  
          // padding: 40px 40px 30px 40px;
        }
      }
  
      .tab-box {
        margin-bottom: 30px;
        .flex-center();
  
        .tab-item {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24px;
            color: #333333;
  
          &.active {
            color: #333333;
          }
        }
      }
  
      .input-wrap {
        width: 400px;
        margin: 0 auto;
      }
  
      .input-box {
        margin-bottom: 20px;
        width: 100%;
        height: 50px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 4px;
        .flex-between();
        overflow: hidden;
  
        span {
          display: inline-block;
          width: 95px;
  
          border-right: 1px solid #ccc;
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 14px;
          color: #7D7D7D;
  
          text-indent: 1em;
        }

        .get-code{
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #FF862C;
          cursor: pointer;
        }
  
        img {
          width: 36px;
        }
  
        input {
          flex: 2;
          height: 100%;
          padding-left: 16px;
          font-size: 14px;
          color: #000;
  
          &::-webkit-input-placeholder {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #d7d7d7;
          }
        }
      }
  
      .agree-box {
        text-align: left;
        margin-top: 20px;
        .flex-between();
  
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 24px;
        color: #999999;
  
        a {
          color: #4CA5E4;
        }
      }
  
      .btn-box {
        margin-top: 60px;
        margin-top: 30px;
  
        button {
          width: 100%;
          height: 44px;
          background: #31A41B;
          border-radius: 4px 4px 4px 4px;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
  
      .register-box {
        margin-top: 30px;
        text-align: center;
        font-size: 14px;
  
        a {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 24px;
          color: #4CA5E4;
          border-bottom: 1px solid #4CA5E4;
        }
      }
    }
  }
  
  
  .terms-box {
    position: absolute;
    height: 40px;
    background: #F5F6F8;
    border-radius: 0px 0px 16px 16px;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    padding-left: 20px;
    text-align: center;
  
  
    .terms-check {
      cursor: pointer;
      font-family: OPPOSans, OPPOSans;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
  
      img {
        margin-right: 10px;
        width: 18px;
        height: 18px;
      }
    }
  
    .terms-text {
      cursor: pointer;
      font-family: OPPOSans, OPPOSans;
      font-weight: 400;
      font-size: 12px;
      color: #2B523B;
  
      &:hover {
        color: #4CA5E4;
      }
    }
  }

  
  </style>
  
  <style scoped lang="less" src="@/assets/h5css/page/retrieve.less"></style>
  